// pages/rfid_binds/rfid_kpi/rfid_kpi.js
// import * as echarts from "../../../../packageB/components/echarts/echarts";
import * as echarts from "../../../components/echarts/echarts";
// import * as echarts from "../../../packageB/components/echarts/echarts";
function drawChart4(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  wx.request({
    url: "https://logisticsengineering.gree.com/_injection_rfid_api/in_and_outs",
    method: "post",
    data: {
    },
    success(res) {
      const data = res.data.data;
    let option = {
      title: {
        text: "昨日出入库情况",
        left: "center",
        textStyle: {
          fontSize: 24
        }
      },
      color: ["#c23531", "#2f4554"],
      label: {
        show: true
      },
      legend: {
        top: 50
      },
      grid: {
        top: 100,
        bottom: 30
      },
      tooltip: {},
      dataset: {
        dimensions: ["product", "工装车", "物料"],
        source: [
          {
            product: "入库",
            工装车: data[0],
            物料: data[1]
          },
          { product: "出库", 工装车: data[2], 物料: data[3] }
        ]
      },
      xAxis: {
        type: "category",
        axisTick: {
          interval: 0
        }
      },
      yAxis: {
        show: false
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: "bar" }, { type: "bar" }]
    };
    chart.setOption(option);
    }
  });
}

function drawChart3(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  wx.request({
    url: "https://logisticsengineering.gree.com/_injection_rfid_api/store_s_time",
    method: "post",
    data: {
    },
    success(res) {
      const data = res.data.data;
      let option = {
        title: {
          text: "在库时长分布情况",
          left: "center",
          textStyle: {
            fontSize: 24
          }
        },
        grid: {
          bottom: "30px"
        },
        xAxis: {
          type: "category",
          data: [
            "<1天",
            "1-2天",
            "2-3天",
            "3-4天",
            "4-5天",
            "5-6天",
            "6-7天",
            ">7天"
          ],
          axisTick: {
            interval: 0
          }
        },
        yAxis: {
          type: "value",
          position: "inside",
          show: false
        },
        series: [
          {
            data: data,
            type: "bar",
            label: {
              show: true
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            }
          }
        ]
      };
      chart.setOption(option);
    }
  });
}


function drawChart2(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  wx.request({
    url: "https://logisticsengineering.gree.com/_injection_rfid_api/store_distribution",
    method: "post",
    data: {
    },
    success(res) {
      const data = res.data.data;
      let option = {
        title: {
          text: "在库数对比",
          left: "center",
          textStyle: {
            fontSize: 24
          }
        },
        color: ["#c23531", "#2f4554"],
        label: {
          show: true
        },
        legend: {
          top: 50
        },
        grid: {
          top: 100,
          bottom: 30
        },
        tooltip: {},
        dataset: {
          dimensions: ["product", "工装车", "物料"],
          source: [
            {
              product: "505河边仓库",
              工装车: data["store_num2"],
              物料: data["material_num2"]
            },
            {
              product: "排洪渠",
              工装车: data["store_num1"],
              物料: data["material_num1"]
            }
          ]
        },
        xAxis: {
          type: "category",
          axisTick: {
            interval: 0
          }
        },
        yAxis: {
          show: false
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }]
      };
      chart.setOption(option);
    }
  });
}

function drawChart1(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);
  wx.request({
    url: "https://logisticsengineering.gree.com/_injection_rfid_api/vehicle_distribution",
    method: "post",
    data: {
    },
    success(res) {
      const data = res.data.data;
    console.log(data);
    let option = {
      title: {
        text: "工装车数量分布",
        left: "center",
        textStyle: {
          fontSize: 24
        }
      },
      label: {
        show: true,
        fontSize: 12,
        formatter: "{b} : \n{c}辆\n占{d}%"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "horizontal",
        left: "center",
        top: "50px",
        data: ["在库", "在周转"]
      },
      series: [
        {
          name: "工装车状态",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: data.store_num, name: "在库" },
            { value: data.transfer_num, name: "在周转" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
    chart.setOption(option);
    }
  });
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    username: "",
    user_email: "",
    password:"",
    token: "",
    show_dialog:false,
    ec1: {
      onInit: drawChart1
    },
    ec2: {
      onInit: drawChart2
    },
    ec3: {
      onInit: drawChart3
    },
    ec4: {
      onInit: drawChart4
    },

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  drawChart3() {
    let chart = this.$echarts.init(document.getElementById("main3"));
    request({
      url: "/store_s_time",
      method: "post",
      params: {}
    }).then(res => {
      const data = res.data;
      let option = {
        title: {
          text: "在库时长分布情况",
          left: "center",
          textStyle: {
            fontSize: 24
          }
        },
        grid: {
          bottom: "30px"
        },
        xAxis: {
          type: "category",
          data: [
            "<1天",
            "1-2天",
            "2-3天",
            "3-4天",
            "4-5天",
            "5-6天",
            "6-7天",
            ">7天"
          ],
          axisTick: {
            interval: 0
          }
        },
        yAxis: {
          type: "value",
          position: "inside",
          show: false
        },
        series: [
          {
            data: data,
            type: "bar",
            label: {
              show: true
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            }
          }
        ]
      };
      chart.setOption(option);
    });
  },
  drawChart2() {
    let chart = this.$echarts.init(document.getElementById("main2"));
    request({
      url: "/store_distribution",
      method: "post",
      params: {}
    }).then(res => {
      const data = res.data;
      let option = {
        title: {
          text: "在库数对比",
          left: "center",
          textStyle: {
            fontSize: 24
          }
        },
        color: ["#c23531", "#2f4554"],
        label: {
          show: true
        },
        legend: {
          top: 50
        },
        grid: {
          top: 100,
          bottom: 30
        },
        tooltip: {},
        dataset: {
          dimensions: ["product", "工装车", "物料"],
          source: [
            {
              product: "505河边仓库",
              工装车: data["store_num2"],
              物料: data["material_num2"]
            },
            {
              product: "排洪渠",
              工装车: data["store_num1"],
              物料: data["material_num1"]
            }
          ]
        },
        xAxis: {
          type: "category",
          axisTick: {
            interval: 0
          }
        },
        yAxis: {
          show: false
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }]
      };
      chart.setOption(option);
    });
  },
  draw(){
    this.drawChart1();
    this.drawChart2();
    this.drawChart3();
    this.drawChart4();
},
drawChart1() {
  let chart = this.$echarts.init(document.getElementById("main"));
  request({
    url: "/vehicle_distribution",
    method: "post",
    params: {}
  }).then(res => {
    const data = res.data;
    console.log(data);
    let option = {
      title: {
        text: "工装车数量分布",
        left: "center",
        textStyle: {
          fontSize: 24
        }
      },
      label: {
        show: true,
        fontSize: 12,
        formatter: "{b} : \n{c}辆\n占{d}%"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "horizontal",
        left: "center",
        top: "50px",
        data: ["在库", "在周转"]
      },
      series: [
        {
          name: "工装车状态",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: data.store_num, name: "在库" },
            { value: data.transfer_num, name: "在周转" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
    chart.setOption(option);
  });
},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})